<template>
    <div class="support-coupon-detail">
        <div class="row clearfix" style="background:white;padding: 20px 42px; ">
            <c-col :span="16">
                <div class="title-wrap">
                    <div class="title-img">
                        <img :src="titleIcon">
                    </div>
                    <div class="title">{{title}}</div>
                </div>
                <div class="title-content-wrap">
                    <div class="left">
                        <li v-for="(item,index) in listLeft">
                            <span class="key">{{item.key}}：</span>
                            <span class="val">{{item.value}}</span>
                        </li>
                    </div>
                    <div class="right">
                        <li v-for="(item,index) in listRight">
                            <span class="key">{{item.key}}：</span>
                            <span class="val">{{item.value}}</span>
                        </li>
                    </div>
                </div>
            </c-col>
            <c-col :span="8">
                <div class="grid-content bg-purple-dark align-right">
                    <!--<div class="btn-wrap">-->
                        <!--<c-button @click="editLine" v-show="status === 3 || status === 4">{{statusEditWord}}</c-button>-->
                        <!--<c-button type="primary" @click='add'>创建新优惠券</c-button>-->
                    <!--</div>-->
                    <div class="btn-wrap">
                        <slot></slot>
                    </div>
                    <!-- <div class="btn-wrap" v-show="statusWord === '上线中'">
                        <c-button @click="cancelTop" v-show="isTop">取消置顶</c-button>
                        <c-button type="primary" @click='editLine'>下线</c-button>
                    </div>
                    <div class="btn-wrap" v-show="statusWord === '待审核'">
                        <c-button @click="disagree">审核不通过</c-button>
                        <c-button type="primary" @click='agree'>审核通过</c-button>
                    </div> -->
                    <ul class="placeinfo">
                        <div class="info-item" v-for="(item,index) in statusList" :key="index">
                            <div>{{item.key}}</div>
                            <div class="val">{{item.label}}</div>
                        </div>
                        <!-- <div class="right" v-show="statusWord !== '待审核'">
                            <div>领取数量</div>
                            <div class="val">{{receiveNum}}</div>
                        </div> -->
                    </ul>
                </div>
            </c-col>
        </div>
    </div>
</template>

<script>
export default {
  name: '',
  props: {
    title: {
      type: String,
      default: 'title'
    },
    titleIcon: {
      type: String,
      default: '../imgs/edit.png'
    },
    listLeft: {
      type: Array,
      default () {
        return [
          { key: 'test', value: 'test' },
          { key: 'test', value: 'test' }
        ]
      }
    },
    listRight: {
      type: Array,
      default () {
        return [
          { key: 'test', value: 'test' },
          { key: 'test', value: 'test' }
        ]
      }
    },
    statusList: {
      type: Array,
      default () {
        return [
          { key: 'test', value: 'test' }
        ]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
    .support-coupon-detail {
        padding: 0 !important;
        .item {
            margin-bottom: 10px;
            display: flex;
            .item-left {
                width: 100px;
                display: flex;
                align-items: center;
            }
        }
    .row {
    .title-wrap {
        font-size: 20px;
        line-height: 28px;
        font-weight: bold;
        color: #2a2a2a;
    .title-img {
        width: 28px;
        height: 28px;
        display: inline-block;
        margin-right: 16px;
    }
    .title {
        display: inline-block;
        vertical-align: top;
    }
    }
    .title-content-wrap {
        display: flex;
        margin-top: 18px;
        margin-bottom: 8px;
        line-height: 22px;
        font-size: 14px;
    .left {
        width: 50%;
    }
    li {
        color: #2a2a2a;
        margin-bottom: 8px;
        list-style: none;
    .val {
        color: #909399;
    }
    }
    }
    .grid-content {
    .btn-wrap {
        text-align: right;
    }
    .placeinfo {
        display: flex;
        margin-top: 20px;
        justify-content: flex-end;
    }
    .left {
        color: #909399;
    .val {
        margin-top: 12px;
        font-size: 22px;
        text-align: right;
        color:  #2a2a2a;
    }
    }
    .info-item {
        margin-left: 40px;
        font-size: 14px;
        color: #909399;
    .val {
        margin-top: 12px;
        font-size: 20px;
        color: rgba(0,0,0,0.85);
        text-align: right;
    }
    }
    .info-item:first-child {
        margin-left: 0
    }

    }
    }
    }

</style>
<style lang="scss">
    // .el-tooltip__popper {
    //     max-width: 500px !important;
    //     word-break: break-all !important;
    //     text-wrap: normal !important;
    // }
    // .support-coupon-detail {
    //     .el-tooltip__popper {
    //         max-width: 500px !important;
    //         word-break: break-all !important;
    //         text-wrap: normal !important;
    //     }
    //     .el-tooltip {
    //         /*width: 500px !important;*/
    //         word-break: break-all !important;
    //         text-wrap: normal !important;
    //     }
    // }
</style>
